<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1,'--btn-color':configInfo.btnColor}">
		<view class="conter">
			<uni-steps :options="stepsOptions" :active="speed" active-color="#36b368"/></uni-steps>
		</view>
		<view class="m-md">
		<u-transition :show="speed == 0" mode="fade">
			<view class="form-warp section-bg">
				<view class="form-warp_item" v-if="stepOne['type']['value'] == 1">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{ $t('merchant-add.form-item-1') }}</text>
							<text class="form-warp___right-text"></text>
						</view>
					</view>	
					<view class="input-inline">
						<m-uploads
							:uploadNum="1"
							@confirm="uploadThumb($event)"
							@delete="deleteThumb($event)"
						>
						</m-uploads>
					</view>
				</view>
				<view class="form-warp_item" @click="showCates = true" v-if="stepOne['type']['value'] == 1">
					<view class="form-warp__label">
						<text>{{$t('task_add.select-cat-label')}}</text>
					</view>	
					<view class="form-warp__value">
						<text>{{onCat}}</text>
					</view>
				</view>
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.title-label')}}</text>
							<text class="form-warp___right-text"></text>
						</view>
					</view>	
					<view class="input-inline">
						<input type="text" name="mobile" :placeholder="$t('task_add.title-placeholder')" class="input" v-model="stepOne['title']['value']"/>
					</view>
				</view>
				<view class="form-warp_item">
					<view class="form-warp__label">
						<text>{{$t('task_add.desc-label')}}</text>
					</view>	
					<view class="input-inline">
						<textarea
							row="2"
							v-model="stepOne['desc']['value']"
							:autoHeight="true"
							:placeholder="$t('task_add.desc-placeholder')"
						></textarea>
					</view>
				</view>
				<view class="form-warp_item">
					<view class="form-warp__label">
						<text>{{$t('task_add.people-label')}}</text>
					</view>	
					<view class="input-inline">
						<input type="number" name="ticket_num" :placeholder="$t('task_add.people-placeholder')" class="input" v-model="stepOne['ticket_num']['value']" @input="changeTicketNum"/>
					</view>
				</view>
			</view>
			<view class="form-warp">
				<view class="form-warp_item" @click="showStartTime = true">
					<view class="form-warp__label">
						<text>{{$t('task_add.begintime-label')}}</text>
					</view>	
					<view class="form-warp__input">
						<input type="text" name="start_time" :placeholder="$t('task_add.begintime-placeholder')" class="input" disabled="true" v-model="stepOne['start_time']['value']"/>
					</view>
		<!-- 		<view class="form-warp__value">
						<text>{{onStartTime}}</text>
					</view> -->
					<!-- v-model="stepOne['start_time']['value']" -->
				</view>
				
				<view class="form-warp_item"  @click="showEndTime = true">
					<view class="form-warp__label">
						<text>{{$t('task_add.finishtime-label')}}</text>
					</view>	
					<view class="form-warp__input">
						<input type="text" name="end_time" :placeholder="$t('task_add.finishtime-placeholder')" class="input" disabled="true" v-model="stepOne['end_time']['value']"/>
					</view>
				</view>
			</view>
<!-- 			<view class="form-warp">
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.type-label')}}</text>
							<text class="form-warp___right-text">
								
							</text>
						</view>
					</view>	
					<view class="form-warp__value">
						<text>{{$t('task_add.type-error')}}</text>
					</view>
					<view class="form-radio">
						<u-radio-group
							v-model="stepOne.type.value"
							placement="row"
							activeColor="#ff5e00"
						>
						    <u-radio
								size="30rpx"
								labelSize="27rpx"
								:customStyle="{marginRight: '30rpx'}"
								v-for="(item, index) in typeList"
								:key="index"
								:label="item.name"
								:name="item.value"
						    >
						    </u-radio>
						</u-radio-group>
					</view>
				
				</view>
			</view> -->
		</u-transition>
		<!-- 线上类型 -->
		<u-transition :show="speed == 1" mode="fade">
			<view class="form-warp" v-if="stepOne['type']['value'] == 1">
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.money-label')}}</text>
							<text class="form-warp___right-text text-auxiliary">{{$t('task_add.money-placeholder')}}</text>
						</view>
					</view>	
					<view class="input-inline">
						<input type="text" name="unit_price" :placeholder="$t('task_add.money-placeholder')" class="input" v-model="stepTypeOne['unit_price']['value']" @input="changeUnitPrice"/>
					</view>
				</view>
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.equ-label')}}</text>
							<text class="form-warp___right-text"></text>
						</view>
					</view>	
					<view class="form-radio">
						<u-radio-group
							v-model="stepTypeOne.limit_device.value"
							placement="row"
							activeColor="#ff5e00"
						>
							<u-radio
								size="30rpx"
								labelSize="27rpx"
								:customStyle="{marginRight: '30rpx'}"
								v-for="(item, index) in limitDeviceList"
								:key="index"
								:label="item.name"
								:name="item.value"
							>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.receive-label')}}</text>
							<text class="form-warp___right-text"></text>
						</view>
					</view>	
					<view class="form-radio">
						<u-radio-group
							v-model="stepTypeOne.limit_rec.value"
							placement="row"
							activeColor="#ff5e00"
						>
							<u-radio
								size="30rpx"
								labelSize="27rpx"
								:customStyle="{marginRight: '30rpx'}"
								v-for="(item, index) in limitRecList"
								:key="index"
								:label="item.name"
								:name="item.value"
							>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="form-warp" v-if="taskData.type == 1">
				<view class="form-warp_item" @click="showSubTime = true">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.limit-submit-time-label')}}</text>
							<text class="form-warp___right-text text-auxiliary">{{$t('task_add.limit-submit-time-desc')}}</text>
						</view>
					</view>	
					<view class="form-warp__value">
						<text>{{onSubTime}}</text>
					</view>
				</view>
				<u-picker :show="showSubTime" :columns="subTimeColumns" keyName="label" :closeOnClickOverlay="true" @cancel="showSubTime=false" @close="showSubTime = false" @confirm="subTimeConfirm"></u-picker>
				<view class="form-warp_item" @click="showAuditTime = true">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.limit-audit-time-label')}}</text>
							<text class="form-warp___right-text text-auxiliary">{{$t('task_add.limit-audit-time-desc')}}</text>
						</view>
					</view>	
					<view class="form-warp__value">
						<text>{{onAuditTime}}</text>
					</view>
				</view>
				<u-picker :show="showAuditTime" :columns="auditTimeColumns" keyName="label" :closeOnClickOverlay="true" @cancel="showAuditTime=false" @close="showAuditTime = false" @confirm="auditTimeConfirm"></u-picker>
			</view>
			<!-- 添加步骤 -->
			<view class="form-warp" v-if="stepOne['type']['value'] == 1">
				<view class="form-warp_item">
					<view class="form-warp__label">
						<view class="flex-between">
							<text>{{$t('task_add.step-label')}}</text>
							<view class="form-warp___right-text">
								<m-icon :color="configInfo.mainColor1" :textColor="configInfo.mainColor1" name="add-circle-line" :text="$t('task_add.step-add-label')" @click="addStepsModel = true"></m-icon>
							</view>
						</view>
					</view>	
					
			<!-- 		<view class="form-warp__addstep" @click="addStepsModel = true">
						<m-icon name="add-circle-line" :text="$t('task_add.step-add-label')"></m-icon>
					</view> -->
					<m-modal
						:show="addStepsModel"
						:title="$t('task_add.step-modal-title')"
						@close="addStepsModel = false"
					>
					<view class="slot-content">
						<view class="slot-content_item">
							<view class="slot-content__title">
								<text>{{$t('task_add.step-type-label-1')}}</text>
							</view>
							<view class="step-btns text-sm text-center">
								<view class="flex-between">
									<text class="step-btns_item radius-5" @click="addStep(1)">{{$t('task_add.step-type-1')}}</text>
									<text class="step-btns_item radius-5" @click="addStep(2)">{{$t('task_add.step-type-2')}}</text>
								</view>
								<view class="flex-between">
									<text class="step-btns_item radius-5" @click="addStep(3)">{{$t('task_add.step-type-3')}}</text>
									<text class="step-btns_item radius-5" @click="addStep(4)">{{$t('task_add.step-type-4')}}</text>
								</view>
								<view class="flex-between">
									<text class="step-btns_item radius-5" @click="addStep(5)">{{$t('task_add.step-type-5')}}</text>
								</view>
							</view>
						</view>
						<view class="slot-content_item">
							<view class="slot-content__title">
								<text>{{$t('task_add.step-type-label-2')}}</text>
							</view>
							<view class="step-btns text-sm text-center">
								<view class="flex-between">
									<text class="step-btns_item radius-5" @click="addStep(6)">{{$t('task_add.step-type-6')}}</text>
									<text class="step-btns_item radius-5" @click="addStep(7)">{{$t('task_add.step-type-7')}}</text>
								</view>
							</view>
						</view>
					</view>
					</m-modal>
					
					<!-- 步骤展示 -->
					<view class="steps">
						<view class="loading-empty" style="width: 100%;text-align: center;" v-if="stepTypeOne.steps.value.length <= 0">
							<view class="loading-empty__img">
								<image src="/static/images/data-none.png" mode="widthFix" style="width: 150px;"></image>
							</view>
							<text class="loading-empty__title text-auxiliary text-sm">{{ $t('merchant-add.step-none-tips') }}</text>
						</view>
						<view class="step-item" v-for="(item,index) in stepTypeOne.steps.value" :key="index" >
							<view class="flex-between" style="align-items: flex-start;">
								<view class="step-item_num">
									<text>{{ index + 1}}</text>
								</view>
								<view class="step-item_content">
									<view class="step-item__title">
										<view class="flex-between">
											<text>{{stepTypes[item.type]['name']}}</text>
											<m-icon name="delete-bin-5-line" color="#999" size="35rpx" class="step-item___delete_icon" @click="deleceStep(index)"></m-icon>
										</view>
									</view>
									<view class="step-item__textarea">
										<textarea :auto-height="true"  :placeholder="$t('task_add.step-desc-placeholder')" v-model="stepTypeOne.steps.value[index].fields['text']"></textarea>
									</view>
									<view class="step-item__textarea" v-if="item.type == 2">
										<textarea :auto-height="true" :placeholder="$t('task_add.step-contetn-placeholder')" v-model="stepTypeOne.steps.value[index].fields['copy']"></textarea>
									</view>
									<view class="step-item__textarea" v-if="item.type == 3">
										<textarea :auto-height="true"  :placeholder="$t('task_add.step-link-placeholder')" v-model="stepTypeOne.steps.value[index].fields['link']"></textarea>
									</view>
									<view class="step-item__upload" v-if="item.type == 4 || item.type == 5 || item.type == 7">
										<m-uploads
											:uploadNum="1"
											:modelNmae="index"
											:prevImgs="[stepTypeOne.steps.value[index].fields['img']]"
											@delete="deleteConfirm($event)"
											@confirm="uploadConfirm($event)"
										>
										</m-uploads>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view v-if="stepOne['type']['value'] == 2">
				<view class="form-warp">
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>展示城市</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline" @click="changeCityShow = true">
							<text class="text-sm text-warning">{{seleteCityText}}</text>
						</view>
					</view>
				</view>
				<u-picker
					:show="changeCityShow" 
					:columns="cityList" 
					keyName="label" 
					:closeOnClickOverlay="true" 
					@cancel="changeCityShow = false"
					@confirm="changeCityConfirm"
					@close="changeCityShow = false"
				>
				</u-picker>
				<view class="form-warp">
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>{{$t('task_add.salary-money')}}</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="unit_salary" v-model="stepTypeTwo['unit_salary']['value']" :placeholder="$t('task_add.salary-money-placeholder')" class="input" />
						</view>
					</view>
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>{{$t('task_add.salary-unit')}}</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="form-radio">
							<u-radio-group
								placement="row"
								activeColor="#ff5e00"
								v-model="stepTypeTwo.unit_salary_pany.value"
							>
								<u-radio
									size="30rpx"
									labelSize="27rpx"
									:customStyle="{marginRight: '30rpx'}"
									v-for="(item, index) in unitSalaryPany"
									:key="index"
									:label="item.name"
									:name="item.value"
								>
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				
				<view class="form-warp">
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>工作时间</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="work_time" v-model="stepTypeTwo['work_time']['value']" placeholder="例如:早9点至下午6点" class="input" />
						</view>
					</view>
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>工作地点</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="work_add" v-model="stepTypeTwo['work_add']['value']" placeholder="输入详细地址" class="input" />
						</view>
					</view>
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>公司名称（可为空）</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="recruiter_name" v-model="stepTypeTwo['recruiter_name']['value']" placeholder="输入公司名称" class="input" />
						</view>
					</view>
				</view>
				<view class="form-warp">
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>联系电话</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="recruiter_mobile" v-model="stepTypeTwo['recruiter_mobile']['value']" placeholder="输入联系电话号码" class="input" />
						</view>
					</view>
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>联系微信</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="recruiter_weixin" v-model="stepTypeTwo['recruiter_weixin']['value']" placeholder="输入联系微信号码" class="input" />
						</view>
					</view>
				</view>
				<view class="form-warp">
					<view class="form-warp_item">
						<view class="form-warp__label">
							<view class="flex-between">
								<text>标签</text>
								<text class="form-warp___right-text"></text>
							</view>
						</view>	
						<view class="input-inline">
							<input type="text" name="tags" v-model="stepTypeTwo['tags']['value']" placeholder="使用小写,隔开，例如：地推宣传,中午管饭" class="input" />
						</view>
					</view>
				</view>
			</view>
			<view class="form-warp" v-if="stepOne['type']['value'] == 2">


			</view>
		</u-transition>
		<!-- 线下类型 -->
	<!-- 	<u-transition :show="speed == 50" :mode="stepTwoMode"> -->

<!-- 		</u-transition> -->

		<!-- 最后一步 -->
		<u-transition :show="speed == 2" mode="fade">
			<view class="">
				<u-alert type="warning" :description="$t('task_add.alert-tips')"></u-alert>
					<u-cell-group>
						<u-cell :isLink="false">
							<text slot="title" class="cell-title">任务标题</text>
							<view slot="value" class="cell-value">
								<text>{{taskData.title}}</text>
							</view>
						</u-cell>
						<!-- <u-cell :isLink="false">
							<text slot="title" class="cell-title">任务类型</text>
							<view slot="value" class="cell-value">
								<text v-if="taskData.type == 1">悬赏任务</text>
								<text v-if="taskData.type == 2">兼职任务</text>
							</view>
						</u-cell> -->
						<u-cell :isLink="false">
							<text slot="title" class="cell-title">{{$t('task_add.people-label')}}</text>
							<view slot="value" class="cell-value">
								<text>
									{{ taskData.ticket_num }}
								</text>
							</view>
						</u-cell>
						<u-cell :isLink="false" v-if="stepOne['type']['value'] == 1">
							<text slot="title" class="cell-title">{{$t('task_add.cell-money')}}</text>
							<view slot="value" class="cell-value">
								<text class="number">{{ taskData.unit_price }}</text>
								<text class="company">{{configInfo.money_company}}</text>
							</view>
						</u-cell>
						<u-cell :isLink="false" v-if="stepOne['type']['value'] == 1">
							<view class="flex-start" slot="title">
								<text class="cell-title" @click="recPopShow = true">{{$t('task_add.cell-top')}}</text>
								<i-icon name="question-line" size="32rpx" color="#666" @click="recPopShow = true" style="margin-left:15rpx;"></i-icon>
							</view>
							<view slot="value" class="cell-value">
								<u-switch
									space="2" 
									activeColor="#f9ae3d"
									size="18"
									inactiveColor="rgb(230, 230, 230)"
									v-model="isTop"
									@change="isTopChange"
								>
								</u-switch>
							</view>
							<!-- 推荐提示内容 -->
						</u-cell>
					</u-cell-group>
					<u-cell-group class="m-t-md">
						<u-cell :isLink="false" v-if="stepOne['type']['value'] == 1">
							<text slot="title" class="cell-title">{{$t('task_add.cell-fee')}}</text>
							<view slot="value" class="cell-value">
								<text class="number">{{taskFee}}</text>
								<text class="company">{{configInfo.money_company}}</text>
							</view>
						</u-cell>
						<u-cell :isLink="false">
							<text slot="title" class="cell-title">{{$t('task_add.cell-all')}}</text>
							<view slot="value" class="cell-value">
								<text class="number text-lg text-warning" style="font-size: 16px!important;">{{allMoney}}</text>
								<text class="text-sm m-l-xs">{{configInfo.money_company}}</text>
							</view>
						</u-cell>
					</u-cell-group>
			</view>
			
		</u-transition>
		
		</view>
		
		<view class="footer-btns ">
			<view class="flex-between" style="flex-wrap: nowrap;">
				<m-button class="footer-btns_pre" :text="$t('task_add.prev-step')" v-if="speed > 0" @submit="preStep"></m-button>
				<m-button class="footer-btns_next" :text="$t('task_add.next-step')" v-if="speed < 2" @submit="nextStep"></m-button>
				<m-button class="footer-btns_next" :loading="submitLoading" :text="$t('task_add.submit-btn')" v-if="speed == 2" @submit="nextStep"></m-button>
				
				<!-- 
				<text class="footer-btns_pre btn btn-main" @click="preStep" v-if="speed > 0">{{$t('task_add.prev-step')}}</text>
				<text class="footer-btns_next btn btn-main" @click="nextStep" v-if="speed < 2">{{$t('task_add.next-step')}}</text>
				<text class="footer-btns_next btn btn-main" @click="nextStep" v-if="speed == 2">{{$t('task_add.submit-btn')}}</text> -->
			</view>
		</view>
		
		<u-action-sheet
			:show="showCates"
			:actions="catSelect"
			:title="$t('task_add.select-cat-sheet')"
			@close="showCates = false"
			@select="selectCat"
			round="5"
			v-if="stepOne['type']['value'] == 1"
		>
		</u-action-sheet>
		<u-datetime-picker
			:show="showStartTime"
			@close="showStartTime = false"
			@cancel="showStartTime = false"
			@confirm="startTimeConfirm"
			v-model="ontime"
			mode="date"
		></u-datetime-picker>
		<u-datetime-picker
			:show="showEndTime"
			@close="showEndTime = false"
			@cancel="showEndTime = false"
			@confirm="endTimeConfirm"
			v-model="ontime"
			mode="date"
		></u-datetime-picker>
					
		<m-modal
			:show="recPopShow"
			:title="$t('task_add.top-modal-title')"
			@close="recPopShow = false"
		>
		<view class="slot-content text-sm p-md">
			<view class="slot-content_item">
				{{$t('task_add.top-modal-content')}}
			</view>
			<view class="slot-content_item">
				{{$t('task_add.top-modal-content-1')}}
			</view>
		</view>
		</m-modal>
		
		<m-modal
			:show="pageTips"
			:title="$t('task_add.tips-modal-title')"
			@close="pageTips = false"
		>
			<view class="slot-content text-center text-sm p-md">
				<view class="slot-content_item">
					<u-parse :content="$t('task_add.tips-modal-contepnt')"></u-parse>
				</view>
				<view class="slot-content_item text-danger text-xs">
					{{$t('task_add.tips-modal-content-1')}}
				</view>
			</view>
		</m-modal>
		
		<m-modal
			:show="noMoneyShow"
			:title="$t('task_add.no-money-modal-title')"
			:content="$t('task_add.no-money-modal-contepnt')"
			:btn="$t('task_add.no-money-modal-btn')"
			@btnComplete="$util.go('recharge/recharge')"
			@close="noMoneyShow = false"
		></m-modal>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// import {Task} from '../../model/task.js'
	export default {
		data() {
			return {
				scrollTop:0,
				speed:0,
				pageTips:true,
				stepsOptions: [{
					title: this.$t('task_add.step-one-label')
				}, {
					title: this.$t('task_add.step-two-label')
				}, {
					title: this.$t('task_add.step-three-label')
				}],
				time:'',
				taskData:{},
				type:'',
				typeList:[{
					name: this.$t('task_add.online'),
					value:1
				},{
					name: this.$t('task_add.offline'),
					value:2
				}],
				// 步骤一
				stepOne:{
					'thumb'			:	{
						'name':'主图',
						'value':undefined,
						'required':false,
					},
					'category_id'	:	{
						'name':this.$t('task_add.category-id-name'),
						'value':undefined,
						'required':true,
					},
					'title'			:	{
						'name':this.$t('task_add.title-name'),
						'value':undefined,
						'required':true,
					},
					'desc'			:	{
						'name':this.$t('task_add.desc-name'),
						'value':undefined,
						'required':true,
					},
					'type'			:	{
						'name':this.$t('task_add.type-name'),
						'value':undefined,
					},
					'start_time'	:	{
						'name':this.$t('task_add.begintime-label'),
						'value':undefined,
						'required':true,
					},
					'end_time'		:	{
						'name':this.$t('task_add.finishtime-label'),
						'value':undefined,
						'required':true,
					},
					'ticket_num'	:	{
						'name':this.$t('task_add.people-label'),
						'value':undefined,
						'required':true,
					}
				},
				ontime:Number(new Date()),
				onCat:this.$t('task_add.select-category'),
				catCacheKey:'task_cats',
				catList:[],
				showCates:false,
				// onStartTime:'点击选择开始时间',
				showStartTime:false,
				// onEndTime:'点击选择结束时间',
				showEndTime:false,
				stepTypeOne:{
					'unit_price'	:	{
						'name':this.$t('task_add.unit-price-name'),
						'value':undefined,
						'required':true,
					},
					'limit_device'	:	{
						'name':this.$t('task_add.equ-label'),
						'value':undefined,
						'required':true,
					},
					'limit_rec'	:	{
						'name':this.$t('task_add.receive-label'),
						'value':undefined,
						'required':true,
					},
					'limit_sub_time'	:	{
						'name':this.$t('task_add.limit-submit-time-label'),
						'value':undefined,
						'required':true,
					},
					'limit_examine_time'	:	{
						'name':this.$t('task_add.limit-audit-time-label'),
						'value':undefined,
						'required':true,
					},
					'steps'	:	{
						'name':this.$t('task_add.steps-name'),
						'value':[],
						'required':true,
					}
				},
				// 线下兼职
				stepTypeTwo:{
					'city_id'	:	{
						'name': '展示城市',
						'value':undefined,
						'required':false,
					},
					'unit_salary'	:	{
						'name': '薪资待遇',
						'value':undefined,
						'required':true,
					},
					'unit_salary_pany'	:	{
						'name':'薪资单位',
						'value':1,
						'required':true,
					},
					'work_time'	:	{
						'name':'工作时间',
						'value':undefined,
						'required':true,
					},
					'work_add'	:	{
						'name':'工作地点',
						'value':undefined,
						'required':true,
					},
					'recruiter_name'	:	{
						'name':'公司名称',
						'value':undefined,
						'required':false,
					},
					'recruiter_mobile'	:	{
						'name':'联系电话',
						'value':undefined,
						'required':true,
					},
					'recruiter_weixin'	:	{
						'name':'联系微信',
						'value':undefined,
						'required':false,
					},
					'tags'	:	{
						'name':'标签',
						'value':undefined,
						'required':true,
					},
				},
				limitDeviceList:[{
					name: this.$t('task_add.limit-none'),
					value:1
				},{
					name: this.$t('task_add.limit-equ-ios'),
					value:2
				},{
					name: this.$t('task_add.limit-equ-android'),
					value:3
				}],
				limitRecList:[{
					name: this.$t('task_add.limit-number-one'),
					value:1
				},{
					name: this.$t('task_add.limit-none'),
					value:2
				}],
				showSubTime:false,
				onSubTime:this.$t('task_add.select-submit-limit-time'),
				subTimeColumns:[
                    [{
                        label: this.$t('task_add.submit-limit-time-1'),
                        value: 30
                    },{
                        label: this.$t('task_add.submit-limit-time-2'),
                        value: 60
                    },{
                        label: this.$t('task_add.submit-limit-time-3'),
                        value: 120
                    },{
                        label: this.$t('task_add.submit-limit-time-4'),
                        value: 180
                    },{
                        label: this.$t('task_add.submit-limit-time-5'),
                        value: 360
                    },{
                        label: this.$t('task_add.submit-limit-time-6'),
                        value: 720
                    },{
                        label: this.$t('task_add.submit-limit-time-7'),
                        value: 2880
                    }]
                ],
				showAuditTime:false,
				onAuditTime:this.$t('task_add.select-audit-limit-time'),
				auditTimeColumns:[
				    [{
				        label: this.$t('task_add.audit-limit-time-1'),
				        value: 6
				    },{
				        label: this.$t('task_add.audit-limit-time-2'),
				        value: 12
				    },{
				        label: this.$t('task_add.audit-limit-time-3'),
				        value: 24
				    },{
				        label: this.$t('task_add.audit-limit-time-4'),
				        value: 72
				    },{
				        label: this.$t('task_add.audit-limit-time-5'),
				        value: 168
				    },{
				        label: this.$t('task_add.audit-limit-time-6'),
				        value: 240
				    },{
				        label: this.$t('task_add.audit-limit-time-7'),
				        value: 360
				    }]
				],
				stepTypes:{
					1:{
						'name':this.$t('task_add.text-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':1,
						'fields':['text']
					},
					2:{
						'name':this.$t('task_add.date-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':2,
						'fields':['text','copy']
					},
					3:{
						'name':this.$t('task_add.link-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':3,
						'fields':['text','link']
					},
					4:{
						'name':this.$t('task_add.thumb-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':4,
						'fields':['text','img']
					},
					5:{
						'name':this.$t('task_add.qrcode-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':5,
						'fields':['text','img']
					},
					6:{
						'name':this.$t('task_add.info-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':6,
						'fields':['text']
					},
					7:{
						'name':this.$t('task_add.image-step-desc'),
						'desc':this.$t('task_add.display'),
						'type':7,
						'fields':['text','img']
					}
				},
				unitSalaryPany:[{
					name: this.$t('task_add.hour-salary-unit'),
					value:1
				},{
					name: this.$t('task_add.day-salary-unit'),
					value:2
				}],
				taskFee:'0.00',//服务费
				isTop:false, // 是否推荐
				allMoney:'0.00', // 总费用
				cacheKey:'add_task_cache',
				recPopShow:false,
				noMoneyShow:false,
				addStepsModel:false,
				submitLoading:false,
				changeCityShow:false, // 选择城市
				seleteCityText:'点击选择城市',
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			catSelect: state => state.task.cateList,
			cityList:state => uni.getStorageSync('cityList') ||  state.config.cityList,
		}),
		onLoad(option){
			// if()
			let type = option.type
			this.stepOne['type']['value'] = type
			if(type == 2){
				this.stepOne['category_id']['required'] = false
				// unit_price
			}
			this.getTaskCate();
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getTaskCate']),
			...mapMutations(['updateTaskState']),

			selectCat(e){
				this.onCat = e.name;
				this.stepOne.category_id.value = e.cid;
				// console.log(e)
			},
			startTimeConfirm(e){
				// const statrTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				// this.onStartTime = statrTime;
				this.stepOne.start_time.value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showStartTime = false;
			},
			endTimeConfirm(e){
				// const endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				// this.onEndTime = endTime;
				this.stepOne.end_time.value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showEndTime = false;
			},
			groupTypeChange(e){
				// console.log(e)
			},
			preStep(){
				if(this.speed == 1){
					// 第二步回退第一步
					this.speed = 0;
				}
				if(this.speed == 2){
					// 第三步回退第二步
					this.speed = 1;
				}
			},
			nextStep(){
				// let taskData = new Object;
				if(this.speed == 0){
					// 进入第一步
					const stepOneData = this.stepOne;
					for (const key in stepOneData) {
						if(stepOneData[key]['required'] && (stepOneData[key]['value'] == undefined || stepOneData[key]['value'] == '')){
							let tipsText = this.$util.handleStr(this.$t('task_add.no-none'),stepOneData[key]['name']);
							this.$u.toast(tipsText)
							return false;
						}				
						this.taskData[key] = stepOneData[key]['value'];
					}
					this.speed = 1;
					return false;
				}
				if(this.speed == 1){
					// 进入第二步
					if(this.taskData.type == 1){
						// 线上兼职
						const stepTypeOne = this.stepTypeOne;
						for (const key in stepTypeOne) {
							if(stepTypeOne[key]['required'] && (stepTypeOne[key]['value'] == undefined || stepTypeOne[key]['value'] == '')){
								let tipsText = this.$util.handleStr(this.$t('task_add.no-none'),stepTypeOne[key]['name']);
								this.$u.toast(tipsText)
								return false;
							}				
							this.taskData[key] = stepTypeOne[key]['value'];
						}
						if(stepTypeOne['steps']['value'].length <= 0){
							let tipsText = this.$util.handleStr(this.$t('task_add.no-none'),stepTypeOne['steps']['name']);
							this.$u.toast(tipsText);
							return false;
						}
						let stepData = stepTypeOne['steps']['value'];
						
						for (const key in stepData) {
							let stepFields = stepData[key].fields;
							for (const twoKey in stepFields) {
								if(!stepFields[twoKey]){
									let tipsText = this.$util.handleStr(this.$t('task_add.none-tips'),this.stepTypes[stepData[key].type]['name']);
									this.$u.toast(tipsText)
									return false;			
								}
							}
						}
						//
						this.taskData['steps'] = this.stepTypeOne['steps']['value'];
					}
					if(this.taskData.type == 2){
						// 线下兼职
						const stepTypeTwo = this.stepTypeTwo;
						for (const key in stepTypeTwo) {
							if(stepTypeTwo[key]['required'] && (stepTypeTwo[key]['value'] == undefined || stepTypeTwo[key]['value'] == '')){
								let tipsText = this.$util.handleStr(this.$t('task_add.no-none'),stepTypeTwo[key]['name']);
								this.$u.toast(tipsText)
								return false;
							}				
							this.taskData[key] = stepTypeTwo[key]['value'];
						}
						// 计算线下兼职费用
						this.calculateWorkFee()
					}
					this.taskData['is_top'] = 2;
					this.speed = 2;
					return false;
					// return false;
				}
				if(this.speed == 2){
					// 提交
					uni.$u.throttle(this.subTaskData(), 5000)
					return false;
				}
				// this.taskData = taskData;
				// console.log(this.taskData);
			},
			
			// 提交发布
			async subTaskData(){
				this.submitLoading = true
				this.$util.showLoading(this.$t('app.submiting'))
				let data = this.taskData
				let res = await this.$api.merchant.merchantAddTask(data)
				console.log(res)
				let thos = this
				if(res.code == 200){
					this.$util.showToast(this.$t('task_add.submit-success'),function(){
						thos.$util.redirectGo('pages/index','/merchant/')
					})
				}
				if(res.code == 2003){
					// 账户余额不足，将数据存入缓存并跳转至充值页面
					this.noMoneyShow = true
					var draftCache = uni.getStorageSync(this.cacheKey);
				}
				this.submitLoading = false
			},
			
			// 提交限时
			subTimeConfirm(e){
				const value = e.value[0];
				this.onSubTime = value.label;
				this.stepTypeOne.limit_sub_time.value = value.value;
				this.showSubTime = false;
			},
			
			// 审核限时
			auditTimeConfirm(e){
				const value = e.value[0];
				this.onAuditTime = value.label;
				this.stepTypeOne.limit_examine_time.value = value.value;
				this.showAuditTime = false;
			},
			
			// 添加步骤
			addStep(Type){
				const setpType = this.stepTypes[Type]; // 获取步骤类型信息
				// console.log(setpType)
				// var stepValue = this.stepTypeOne.step.value;
				let taskStep = new Object;
				taskStep['type'] = Type;
				taskStep['fields'] = new Object;
				for (const key in setpType.fields) {
					taskStep['fields'][setpType.fields[key]] = '';
				}
				this.stepTypeOne.steps.value.push(taskStep);
				this.addStepsModel = false;
				// console.log(this.stepTypeOne.steps.value)
				// taskStep.push({})
			},
			
			// 图片上传
			uploadConfirm(e){
				// 绑定值
				if(e.urls[0]){
					this.stepTypeOne.steps.value[e.modelName].fields['img'] = e.urls[0];
				}
			},
			
			// 图片删除
			deleteConfirm(e){
				console.log(e.modelName);
				// 绑定值
				if(e.modelName >= 0){
					this.stepTypeOne.steps.value[e.modelName].fields['img'] = '';
				}
			},
			
			// 删除步骤
			deleceStep(index){
				let arr = this.stepTypeOne.steps.value;
				arr.splice(index,1)
				// this.stepTypeOne.steps.value[index].splice(1)
			},
			
			// 所需人数发生变动
			changeTicketNum(e){
				let ticket_num = Number(e.detail.value);
				let unit_price = Number(this.stepTypeOne['unit_price']['value']); // 单次悬赏的货币
				// 更新总费用
				this.changeAllMoney(unit_price,ticket_num);
				// var allMoney = ticket_num*unit_price;
				// this.allMoney = allMoney.toFixed(2);
				// console.log(ticketNum);
			},
			
			// 单次悬赏货币发生变动
			changeUnitPrice(e){
				let unit_price = Number(e.detail.value);
				let ticket_num = Number(this.stepOne['ticket_num']['value']);
				// 更新总费用
				this.changeAllMoney(unit_price,ticket_num);
				// var allMoney = ticket_num*unit_price;
				// this.allMoney = allMoney.toFixed(2);
			},
			
			// 总费用变动
			changeAllMoney(unit_price,ticket_num){
				var allMoney = ticket_num * unit_price;
				let ser_fee_prop = this.configInfo.merchant_add_2_ser_fee ? Number(this.configInfo.merchant_add_2_ser_fee) : 0
				// 服务费变动
				if(ser_fee_prop > 0){
					// 服务费比例大于1需要计算
					let ser_fee = allMoney * (ser_fee_prop / 100)
					this.taskFee = ser_fee.toFixed(2);
					allMoney = Number(allMoney) + Number(ser_fee);
				}
				this.allMoney = allMoney.toFixed(2);
				// console.log(this.allMoney);
			},
			
			// 推荐开启
			isTopChange(value){
				let rec_fee = this.configInfo.merchant_add_2_rec_fee ? Number(this.configInfo.merchant_add_2_rec_fee) : 0
				if(rec_fee > 0){
					if(value){
						this.taskData['is_top'] = 1;
						var newValue = Number(this.allMoney)+rec_fee;
					}else{
						this.taskData['is_top'] = 2;
						var newValue = Number(this.allMoney)-rec_fee;
					}	1
					this.allMoney = newValue.toFixed(2);
				}
			},
			
			// 选择城市
			changeCityConfirm(e){
				let on = e.value[0]
				this.stepTypeTwo['city_id']['value'] = on.id
				this.seleteCityText = on.label
				this.changeCityShow = false
			},
			
			// 兼职计算费用
			calculateWorkFee(){
				let fee = this.configInfo.merchant_add_1_fee ? this.configInfo.merchant_add_1_fee : 0
				this.allMoney = fee
				// let addfee = this.configInfo.task_work_fee > 0 ? this.configInfo.task_work_fee : 0;
				
				// // 服务费变动
				// let taskfee = Number(this.configInfo.task_fee);
				// if(taskfee > 0){
				// 	// 服务费比例大于1需要计算
				// 	taskfee = taskfee / 100;
				// 	taskfee = addfee * taskfee;
				// 	this.taskFee = taskfee.toFixed(2);
				// 	addfee = Number(addfee) + Number(taskfee);
				// }
				// this.allMoney = addfee.toFixed(2);
			},
			
			// 新增主图
			uploadThumb(e){
				if(e.urls[0]){
					this.stepOne['thumb']['value'] = e.urls[0]
				}
			},
			
			// 删除主图
			deleteThumb(e){
				this.stepOne['thumb']['value'] = undefined
			},
		},

	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	// .conter{
	// 	z-index: 0;
	// }
	.edgeInsetBottom {
		width: 100%;
		height: 120rpx;
		background-color: transparent;
	}
	.uni-steps{
		margin: 30rpx 0;
	}
	.form-warp{
		background-color: #fff;
		// margin:0 30rpx 30rpx;
		margin-bottom: 30rpx;
		border-radius: 10px;
		uni-textarea{
			width: 100%!important;
			padding: 0;
			font-size: $contentSize!important;
			// color: $incolor-2!important;
		}
		&_item{
			padding: 30rpx;
			border-bottom: 1px solid #f5f5f5;
			background-color: transparent;
			.font{
				font-size: 28rpx;
			}
			.input-inline{
				width: 100%;
			}
			.input{
				font-size: $contentSize;
			}
		}
		&_item:last-child{
			border-bottom: none;
		}
		&__label{
			font-size: $titleSize;
			margin-bottom: 30rpx;
		}	
		&__value{
			font-size: $contentSize;
			color: $incolor-2;
		}
		&__options{
			position: relative;
			z-index: 9;
			.btn{
				width: 23%;
				margin-right: 2%;
				margin-bottom: 10rpx;
				background-color: $incolor-2;
			}
		}
		&__addstep{
			border: 1px dashed #888;
			text-align: center;
			border-radius: 10px;
			padding: 15px;
		}
		&___right-text{
			color: $incolor-2;
			font-size: $contentSize;
		}
	}
	.step-item{
		position: relative;
		padding-bottom: 30rpx;
		.flex-between{
			align-items: flex-start;
			flex-wrap: nowrap;
		}
		&_num{
			// margin-right: 5px;
			text{
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				background-color: var(--main-color-1);
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $contentSize;
				z-index: 2;
			}
		}
		&_content{
			margin-left: 30rpx;
			width: 100%;
		}
		&__title{
			font-size: $titleSize;
		}
		&__textarea{
			// width: 80%;
			min-height: 90rpx;
			margin-top: 20rpx;
			overflow: hidden;
			background-color: #f3f3f3;
			border-radius: 5px;
			padding: 5px 10px;
			textarea{
				width:100%
			}
		}
		&__input{
			margin-top: 15rpx;
			input{
				font-size: $contentSize;
			}
		}
		&__upload{
			margin-top: 20rpx;
		}

	}
	.step-item:first-child{
		margin-top: 30rpx;
	}
	.step-item:after{
		position: absolute;
		content: '';
		left: 20rpx;
		width: 1px;
		height: 100%;
		background-color: var(--main-color-1);
		top: 0;
		z-index: 1;
	}
	.step-item:last-child{
		padding-bottom: 0;
	}
	.step-item:last-child:after{
		display: none;
	}
	.footer-btns{
		position: fixed;
		width: 100%;
		bottom:0;
		padding:15rpx 30rpx;
		background-color: #fff;
		z-index: 1;
		&_pre{
			width: 250rpx;
			color: var(--main-color-2);
			background-color: rgba(255,212,38,.1)!important;
			margin-right: 10px;
			-webkit-transition: all 0.3s ease;
		}
		&_next{
			width: 100%;
			-webkit-transition: all 0.3s ease;
		}
	}
	/deep/ .u-alert{
		margin-bottom: 30rpx!important;
	}
	.slot-content{
		&__title{
			font-size: 35rpx;
			font-weight: bold;
			position: relative;
			bottom: -15rpx;
			text{
				background-color: #fff;
				padding: 0 10px;
			}
		}
		.step-btns{
			border: 1px solid #eee;
			// border-top: none;
			// margin-bottom: 10px;
			&_item{
				padding: 15rpx 30rpx;				
				width: 100%;
				color: var(--btn-color);
				background-color: var(--main-color-1);
			}
			.btn{
				
			}
			.flex-between{
				margin: 15px 30rpx;
				flex-wrap: nowrap;
			}
		}
		.step-btns:last-child{
			// margin-bottom: 0;
		}
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
</style>
